<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>解除浮动后的影响_2</title>
</head>
<style>

    /*缺陷：父元素设置了overflow: hidden;在父元素中不能出现没浮动的块级元素*/

    .all{
        background-color: gray;
        overflow: hidden;
    }
    .content{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        float: left;
        margin-right: 5px;
    }
    .box5{
        text-indent: 2em;
    }
    /* 伪元素选择器 选中的是div中的第一个文字 */
    .box5::first-letter {
        color: red;
        font-size: 40px;
    }
    /* 伪元素选择器 选中的是div中的第一行文字 */
    .box5::first-line {
        background-color: yellow;
    }
    div.last:last-of-type{
        background-color: yellow;
        width: 100px;
        height: 100px;
    }
</style>
<body>
<div class="all">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
</div>
<div class="box5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, consequatur delectus distinctio dolore dolorem et iure nam odio odit qui quidem reiciendis rerum ullam? Aperiam consectetur eos fugit harum quae quod vitae? Aliquid eligendi est ex facere facilis fugit illum non perferendis porro qui quis repudiandae soluta tempora totam, vel?</div>
<div class="last">6</div>

</body>
</html>